<template>
    <div class="mask" @touchmove="changeMove" >
		    <div class="search-leader" refs="searchLeader">
            <i class="icon-search" @click='searchSubmit'></i>
            <input placeholder="搜索" v-model="searchValue"  type="text" class="search-input">
            <span class="color-search" @click="close">取消</span>
        </div>
                <!--@input="SearchName"-->
        <v-scroll :on-refresh="onRefresh" :topFixed="top" :on-infinite="onInfinite" :top="top" :dataList="scrollData">
            <div class="leader-info" v-for="(info,index) in dataList" @click.stop="handleSelect(index,info)" :class="{'disabled': !info.pay && !info.personnel}" :key="info.emplid">
                <div class="pic">
                  <img :src="handleImg(info)" alt="" />
                </div>
                <div class="info-container">	
                  <div class="basic-info ellipsis">
                    <h2 >{{info.name}}</h2>
                
                  </div>
                  <div class="posi-info ellipsis">
                    <span>{{info.position_desc}}</span>
                  </div>
                </div>
            </div>
        </v-scroll>

    </div>
</template>
<script>
import Vue from "vue";
import {Toast} from 'mint-ui'
import { Spinner } from "mint-ui";
Vue.component(Spinner.name, Spinner);
import Bus from '@/common/js/vueBus'
import pullRefresh from "@/components/public/components/index"
export default {
  data() {
    return {
      searchValue: "",
      List: [
      ],
      checked: 0,
      scrollTop: 0,
      showSearch: false,
      dataList:[],
      scrollData:{
        noFlag: false //暂无更多数据显示
      },
      top:'1rem',
      isEnd:false,
    };
  },

  watch: {
    showMask: function(newVal) {
      if (newVal) {
        var self = this;
        Vue.nextTick(function() {
          self.$refs.optCont.scrollTop = self.scrollTop;
        });
      }
    },
    searchValue:function(newVal,oldValue){
       
        this.searchSubmit();
    },
    isEnd:function(newVal,oldVal){
        if (newVal) {
            this.isLoadMore();
        }
    }
  },
  components: {
    'v-scroll':pullRefresh
  },
  mounted:function(){

  },
  methods: {
    searchSubmit() {
        this.scrollData.noFlag = false;
        Bus.$emit("searchValue",this.searchValue);
        // this.showSearch = false;
        Bus.$on("dataListArr",data => {
          this.dataList = data;
        });
        Bus.$on('isEnd',bol => {
          this.isEnd = bol;
        })

    },
    // SearchName:function(){
    //     Bus.$emit("searchValue",this.searchValue)
    // },
    changeMove: function(e) {
      e.stopPropagation();
    },
    onRefresh(done) {
        Bus.$emit("searchPage",1);
        console.log(done,"done");
        done(); // call done
    },
    onInfinite(done) {
      console.log(this.isEnd,"isEndInf");
      console.log(done,"done");
      if (this.isEnd) {
          this.isLoadMore();
          done();
          return;
      }
      Bus.$emit("searchPage");
      this.isLoadMore();   
      done();
    },
    isLoadMore:function(){
      let more = this.$el.querySelector('.load-more');
      if(this.isEnd) {
        more.style.display = 'none'; //隐藏加载条
        //走完数据调用方法
        this.scrollData.noFlag = true;
      } else {
        more.style.display = 'none'; //隐藏加载条
      }
    },
    handleImg : function(info){
        return this.Axios.baseURI + this.URL.getEmployeeImgNew.url + '?emplid=' + info.emplid + '&sex=' +(info.sex_descr === '女' ? 2 : 1) + '&token=' + localStorage.getItem('token');
    },
    handleSelect:function(index,info){

      if (!info.pay && !info.personnel) {
				Toast({
				message: '您无权限访问此人详细信息',
				position: 'center',
				className:'toastStyle',
				duration: 2000
				});
				return;  
      }
      Bus.$emit('showPanel');           


      localStorage.setItem('per_pay',info.pay);
      localStorage.setItem('per_person',info.personnel);
      localStorage.setItem('per_em',info.emplid);

      // localStorage.setItem('per_pay',info.pay);
      // localStorage.setItem('per_person',info.personnel);
      // localStorage.setItem('per_em',info.emplid);

      // location.href = '/module/resume.html';
    },
    handleClick: function(index, val, label) {
      var self = this;
      self.checked = index;
      setTimeout(function() {
        self.$emit("update:showMask", false);
        self.$emit("returnChecked", val, label);
      }, 100);
      self.scrollTop = self.$refs.optCont.scrollTop;
    },
    close() {
        this.scrollData.noFlag = false;
        this.showSearch = false;
        this.searchValue =null;
        Bus.$emit('showSearch',this.showSearch)
    }
  }
};
</script>
<style scoped>
.disabled{
    background-color:#FDFDFD;
}
.mask{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
	overflow-y: auto;
    background-color: rgba(255, 255, 255, 1);
    z-index:1000;
}
.leader-info .info-container .basic-info>h2{
	display:inline-block;
	font-size:0.36rem;
  line-height: 0.44rem;
  height: 0.44rem;
}
.leader-info .info-container .basic-info .sex{
	color:#888;
}
.leader-info .info-container .basic-info{
	margin-top:0.02rem;
	margin-bottom: 0.16rem;

}
.leader-info .info-container .posi-info{
	font-size:0.32rem;
}
.leader-info .ellipsis{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.leader-info{
	padding-left:0.3rem;
	padding-top:0.24rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.3rem;    
}
.leader-info>div{	
	display:inline-block;
}
.leader-info .info-container{
	padding-left:0.1rem;
	max-width: 6rem;
}
.pic{
	vertical-align: top;
	width:0.92rem;
	height:0.92rem;
}
.pic img{
	width:0.92rem;
	height:0.92rem;
	border-radius:50%;
}


.search-input{
    width: 70%;
    border:none;
    display: inline-block;
    margin-left:0.2rem;
    padding: 0;
    font-size: 0.32rem;
    height:0.96rem;
    background-color:transparent;
}
.search-input:focus {
    outline: none;
}
.search-input::-webkit-input-placeholder {
    color: #888;
    font-size: 0.32rem;
}
.mask .search-leader{
  font-size:0.32rem;
  line-height:3;
  position:fixed;
  top:0;
  z-index:1000;
  background-color: #fff;
  width:100%;
  border-bottom:1px solid #ccc;
}
.color-search,.icon-search:before{
    color:#26a2ff
}
.icon-search{
    margin-top: 0.32rem;
    float: left;
}

.icon-search,.color-search{
    margin-left:0.4rem;
}
</style>
